<template>
  <div>
    <div class="provider-list">
      <div class="content">
        <div class="project-info">
          <span>项目信息</span>
          <div class="form-box">
            <el-form
              style="max-width: 1200px"
              :model="form"
              ref="formRef"
              :rules="rules"
              label-position="top"
            >
              <el-form-item label="品牌编号" prop="ppNo">
                <el-col :span="10">
                  <el-input size="large" v-model="form.ppNo" />
                </el-col>
              </el-form-item>
              <el-form-item label="联系方式/账号" prop="lianxifangshi">
                <el-col :span="10">
                  <el-input
                    size="large"
                    v-model="form.lianxifangshi"
                    placeholder="请输入手机号"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="密码" prop="mima">
                <el-col :span="10">
                  <el-input
                    size="large"
                    v-model="form.mima"
                    placeholder="默认手机号后六位"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="品牌名称" prop="pinpaimingcheng">
                <el-col :span="10">
                  <el-input size="large" v-model="form.pinpaimingcheng" />
                </el-col>
              </el-form-item>
              <el-form-item label="品牌分类" prop="pinpaifenlei1">
                <el-select
                  v-model="form.pinpaifenlei1"
                  size="large"
                  placeholder="一级"
                  @change="changeSelection1"
                  :loading="loading1"
                  style="width: 240px"
                >
                  <el-option
                    v-for="item in type1"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
                <el-select
                  v-model="form.pinpaifenlei2"
                  size="large"
                  placeholder="二级"
                  @visible-change="GetType2"
                  @change="changeSelection2"
                  :loading="loading2"
                  style="width: 240px; margin-left: 10px"
                >
                  <el-option
                    v-for="item in type2"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
                <el-select
                  v-model="form.pinpaifenlei3"
                  size="large"
                  placeholder="三级"
                  @visible-change="GetType3"
                  :loading="loading3"
                  style="width: 240px; margin-left: 10px"
                >
                  <el-option
                    v-for="item in type3"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                label="项目图片/视频(建议尺寸:750*560px)"
                prop="pinpaitupian"
              >
                <bjz-oss
                  :previewList="form.pinpaitupian"
                  :accept="['.jpg', '.png', '.jpeg', '.mp4']"
                  :allowMultiple="true"
                  :size="100"
                  @success="onSuccess1"
                  @remove="removeUploadFile1"
                />
              </el-form-item>
              <el-form-item label="合作期限" prop="hezuoqixian">
                <el-col :span="10">
                  <el-input
                    size="large"
                    maxlength="10"
                    v-model="form.hezuoqixian"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="招商状态" prop="zhaoshang">
                <el-select
                  v-model="form.zhaoshang"
                  size="large"
                  placeholder="选择"
                  style="width: 300px"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="创建时间" prop="chuangjianshijian">
                <el-col :span="10">
                  <el-date-picker
                    v-model="form.chuangjianshijian"
                    :disabled-date="disabledDate"
                    @change="changeYear"
                    type="year"
                    placeholder="选择年份"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="品牌供应商" prop="pinpaigongyingshang">
                <el-col :span="10">
                  <el-input
                    size="large"
                    maxlength="80"
                    v-model="form.pinpaigongyingshang"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="国籍" prop="guoji">
                <el-col :span="10">
                  <el-input size="large" maxlength="20" v-model="form.guoji" />
                </el-col>
              </el-form-item>
              <el-form-item label="品牌档次" prop="pinpaidangci">
                <el-col :span="10">
                  <el-input
                    size="large"
                    maxlength="20"
                    v-model="form.pinpaidangci"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="品牌联系人" prop="lianxiren">
                <el-col :span="10">
                  <el-input
                    size="large"
                    maxlength="20"
                    v-model="form.lianxiren"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="介绍图(建议尺寸:622*272px)" prop="jieshaotu">
                <bjz-oss
                  :previewList="form.jieshaotu"
                  :accept="['.jpg', '.png', '.jpeg']"
                  @success="onSuccess2"
                  @remove="removeUploadFile2"
                />
              </el-form-item>
              <el-form-item label="备注">
                <el-col :span="10">
                  <el-input
                    size="large"
                    rows="5"
                    type="textarea"
                    maxlength="500"
                    v-model="form.beizhu"
                  />
                </el-col>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="product-info" style="width: 100%">
          <div class="flex-s" style="align-items: baseline">
            <span style="color: #000">品牌详情：</span>
            <editor
              style="width: calc(100% - 70px)"
              :initValue="form.pinpaixiangqing"
              @onVal="onVal"
            />
          </div>
          <div v-if="check === '1'">
            <p style="margin-top: 50px; color: #000">审核状态</p>
            <el-form-item style="margin-top: 10px">
              <el-radio-group v-model="form.shenhe">
                <el-radio :label="0">待审核</el-radio>
                <el-radio :label="1">审核通过</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="bottom flex-s mt20">
            <el-button
              style="margin-left: 100px"
              type="primary"
              @click="submitForm(formRef)"
              >提交信息</el-button
            >
            <el-button style="margin-left: 50px" @click="$router.go(-1)"
              >取消</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, toRefs, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { GetDictionary, GetDictionaryTree } from "@/api/system";
import { AddBrand, GetBrand, EditBrand } from "@/api/brand";
import { baseMsg } from "@/utils/utils";
export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const formRef = ref(null);
    const validateImg = (rule, value, callback) => {
      if (state.form.pinpaitupian && state.form.pinpaitupian.length) {
        callback();
      } else {
        callback(new Error("请上传图片/视频"));
      }
    };
    const validateImg1 = (rule, value, callback) => {
      if (state.form.jieshaotu && state.form.jieshaotu.length) {
        callback();
      } else {
        callback(new Error("请上传介绍图"));
      }
    };
    const disabledDate = (date) => {
      return date.getFullYear() > new Date().getFullYear();
    };
    const state = reactive({
      rules: {
        ppNo: [
          {
            required: true,
            pattern: /^[A-Za-z0-9]+$/,
            message: "请输入品牌编号(数字字母组合)",
            trigger: "blur",
          },
        ],
        mima: [
          {
            min: 6,
            max: 6,
            required: true,
            message: "请输入密码（6位）",
            trigger: "blur",
          },
        ],
        lianxifangshi: [
          {
            pattern: /^1[0-9]{10}$/,
            required: true,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        pinpaimingcheng: [
          {
            required: true,
            message: "请输入品牌名称",
            trigger: "blur",
          },
        ],
        pinpaifenlei1: [
          {
            required: true,
            message: "请选择品牌分类",
            trigger: "change",
          },
        ],
        pinpaitupian: [
          {
            required: true,
            trigger: "blur",
            validator: validateImg,
          },
        ],
        hezuoqixian: [
          {
            required: true,
            message: "请输入合作期限",
            trigger: "blur",
          },
        ],
        zhaoshang: [
          {
            required: true,
            message: "请选择招商状态",
            trigger: "change",
          },
        ],
        chuangjianshijian: [
          {
            type: "date",
            required: true,
            message: "请选择创建时间",
            trigger: "change",
          },
        ],
        pinpaigongyingshang: [
          {
            required: true,
            message: "请输入品牌供应商",
            trigger: "blur",
          },
        ],
        guoji: [
          {
            required: true,
            message: "请输入国籍",
            trigger: "blur",
          },
        ],
        pinpaidangci: [
          {
            required: true,
            message: "请输入品牌档次",
            trigger: "blur",
          },
        ],
        lianxiren: [
          {
            required: true,
            message: "请输入品牌联系人",
            trigger: "blur",
          },
        ],
        jieshaotu: [
          {
            required: true,
            trigger: "blur",
            validator: validateImg1,
          },
        ],
      },
      disabledDate: disabledDate,
      form: {
        ppNo: "",
        lianxifangshi: "",
        mima: "",
        pinpaimingcheng: "",
        pinpaifenlei1: "",
        pinpaifenlei2: "",
        pinpaifenlei3: "",
        pinpaitupian: [],
        hezuoqixian: "",
        chuangjianshijian: "",
        pinpaigongyingshang: "",
        guoji: "",
        pinpaidangci: "",
        lianxiren: "",
        jieshaotu: [],
        beizhu: "",
        pinpaixiangqing: "",
        shenhe: 0,
      },
      type1: [],
      type2: [],
      type3: [],
      loading1: true,
      loading2: true,
      loading3: true,
      options: [],
      check: localStorage.getItem("check"),
    });
    const changeYear = (val) => {
      if (val.getFullYear() > new Date().getFullYear()) {
        state.form.chuangjianshijian = "";
      } else {
        state.form.chuangjianshijian = val.getFullYear();
      }
    };
    // 一级分类查询
    const GetType1 = async () => {
      state.loading1 = true;
      const res = await GetDictionaryTree({ dicModel: "pinpaileixing" });
      if (res.code == 4201) {
        state.type1 = res.data;
        state.loading1 = false;
      } else {
        state.loading1 = false;
      }
    };
    // 查询二级分类
    const GetType2 = (val) => {
      state.loading2 = true;
      state.type2 = [];
      if (state.form.pinpaifenlei1) {
        GetDictionary({ dicId: state.form.pinpaifenlei1 }).then((res) => {
          if (res.code == 4201) {
            state.type2 = res.data;
          }
        });
        state.loading2 = false;
      } else {
        state.loading2 = false;
      }
    };
    // 查询三级分类
    const GetType3 = (val) => {
      state.loading3 = true;
      state.type3 = [];
      if (state.form.pinpaifenlei2) {
        GetDictionary({ dicId: state.form.pinpaifenlei2 }).then((res) => {
          if (res.code == 4201) {
            state.type3 = res.data;
          }
        });
        state.loading3 = false;
      } else {
        state.loading3 = false;
      }
    };
    // 获取招商状态下拉列表
    const GetOptions = () => {
      GetDictionaryTree({ dicModel: "pinpaizhaoshangzhuangtai" }).then(
        (res) => {
          if (res.code == 4201) {
            state.options = res.data;
          }
        }
      );
    };
    // 品牌id查询
    const QueryBrand = () => {
      if (route.query.type == "edit") {
        GetBrand({ id: route.query.id }).then((res) => {
          if (res.code == 4201) {
            state.form = res.data;
            state.form.chuangjianshijian = String(state.form.chuangjianshijian);
            GetType2();
            GetType3();
          }
        });
      }
    };
    // 分类选中值改变
    const changeSelection1 = () => {
      state.type2 = [];
      state.type3 = [];
      state.form.pinpaifenlei2 = "";
      state.form.pinpaifenlei3 = "";
    };
    const changeSelection2 = () => {
      state.type3 = [];
      state.form.pinpaifenlei3 = "";
    };
    // 图片上传成功
    const onSuccess1 = (res) => {
      state.form.pinpaitupian.push(res);
    };
    const onSuccess2 = (res) => {
      state.form.jieshaotu.push(res);
    };
    // 上传文件删除
    const removeUploadFile1 = (index) => {
      state.form.pinpaitupian.splice(index, 1);
    };
    const removeUploadFile2 = (index) => {
      state.form.jieshaotu.splice(index, 1);
    };
    // 富文本编辑器
    const onVal = (val) => {
      state.form.pinpaixiangqing = val;
    };
    // 提交表单
    const submitForm = async (formEl) => {
      if (!formEl) return;
      await formEl.validate((valid, fields) => {
        if (valid) {
          if (route.query.type == "add") {
            AddBrand(state.form).then((res) => {
              if (res.code == 4202) {
                baseMsg("新增品牌成功");
                router.go(-1);
              }
            });
          }
          if (route.query.type == "edit") {
            EditBrand(state.form).then((res) => {
              if (res.code == 4202) {
                baseMsg("品牌编辑成功");
                router.go(-1);
              }
            });
          }
        }
      });
    };
    GetType1();
    GetOptions();
    QueryBrand();
    return {
      ...toRefs(state),
      formRef,
      changeYear,
      onSuccess1,
      onSuccess2,
      submitForm,
      onVal,
      removeUploadFile1,
      removeUploadFile2,
      GetType1,
      GetType2,
      GetType3,
      changeSelection1,
      changeSelection2,
      GetOptions,
      QueryBrand,
    };
  },
});
</script>
<style lang="scss" scoped>
.content {
  border: none !important;
}
.project-info {
  padding: 30px 100px;
  font-size: 20px;
  color: black;
  display: flex;
  .form-box {
    margin: 80px 0 0 140px;
    flex: 1;
  }
}
.product-info {
  padding: 40px;
}
.money-icon {
  position: relative;
  &::before {
    content: "￥";
    color: #000;
    font-size: 16px;
    top: 2px;
    left: 20px;
    position: absolute;
    z-index: 2;
  }
}
</style>
